<template>
  <div class="btn-sty" :class="[type, size]">
    <!-- 匿名插槽   一个组件只能有一个匿名插槽-->
    <slot></slot>
    {{ text }}
    <hr />
    <!-- 具名插槽 -->
    <slot name="one" />
    <hr />
    <!-- 作用域插槽 -->
    <slot name="two" :abc="456" :data="val"></slot>
  </div>
  <!-- 插槽：是为了让组件更具有拓展性，比如根据我们不同的需求，展示不同的结构，想要什么结构就可以向组件插入什么结构，并且不影响其他组件的页面
    1.匿名插槽
    2.具名插槽
    3.作用域插槽
   -->
</template>

<script>

export default {

  data() {
    return {
        val:'123'
    };
  },
  props: {
    text: {
      type: [String, Number], //传递的text 必须为String类型
      default: "确定", //如果没有向text传参 就使用默认值
    },
    type: {
      type: String,
    },
    size: {
      type: String,
    },
  },
};
</script>

<style scoped>
.btn-sty {
  font-size: 16px;
  width: 100px;
  height: 74px;
  border-radius: 8px;
  background-color: skyblue;
}
/* 正常的 */
.primary {
  background-color: #0099ff;
}
/* 成功的 */
.success {
  background-color: green;
}
/* 失败的 */
.error {
  background-color: red;
}
.big {
  width: 400px;
  height: 200px;
}
.middle {
  width: 200px;
  height: 100px;
}
.small {
  width: 50px;
  height: 25px;
}
</style>